<!--任务导航-->
<script setup lang="ts">

import StaionButton from "../components/learn_task/StaionButton.vue";

///路局
import railwayIcon from '../assets/railway.png';
import unRailwayIcon from '../assets/un_railway.png';

///所有
import allWayIcon from '../assets/all_way.png';
import unAllWayIcon from '../assets/un_all_way.png'

///宝鸡东
import trainStaionIcon from '../assets/train_staion_icon.png';
import unTrainStaionIcon from '../assets/un_train_staion_icon.png'

///火车
import unTrainIcon from '../assets/un_train_icon.png';
import trainIcon from '../assets/train_icon.png';

///学的Imagae
import iconManager from '../assets/manager_icon.png'
///管的Image
import iconLearn from '../assets/learn.png'

import {computed, onMounted, ref} from "vue";
import {useRoute,useRouter} from "vue-router";

const isZeroSelected =ref(0);
const route = useRoute();
const router = useRouter();

const leftMenuType = ref(0);

const btnDatas = ref([
  {    ///标题
    title: "路局",
    ///当前的Index
    index: 1,
    id:1,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:railwayIcon,
    unSelectedIcon:unRailwayIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:0,},
  {    ///标题
    title: "西安东务段",
    ///当前的Index
    index: 2,
    id:2,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    showRightLine:true,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "安康车务段",
    ///当前的Index
    index: 3,
    id:3,
    ///是否是当前步骤
    selected: true,
    showLeftLine:true,
    selectedIcon:trainIcon,
    showRightLine:false,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "宝鸡车务段",
    ///当前的Index
    index: 4,
    id:4,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    showRightLine:false,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "汉中车务段",
    ///当前的Index
    index: 5,
    id:5,
    ///是否是当前步骤
    selected: false,
    showRightLine:false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "延安车务段",
    ///当前的Index
    index: 6,
    id:6,
    showRightLine:false,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "铜川车务段",
    ///当前的Index
    index: 7,
    id:7,
    showRightLine:false,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
  {    ///标题
    title: "韩城车务段",
    ///当前的Index
    index: 8,
    id:8,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainIcon,
    showRightLine:false,
    unSelectedIcon:unTrainIcon,
    ///类型[0大。1中，2小]
    type:1,},
]);

const btnDatasChildred = ref([{    ///标题
  title: "宝鸡东站",
  ///当前的Index
  index: 0,
  ///是否是当前步骤
  selected: false,
  id:9,
  showLeftLine:true,
  selectedIcon:trainStaionIcon,
  unSelectedIcon:unTrainStaionIcon,
  showRightLine:false,
  type:2,},
  {    ///标题
    title: "宝鸡东站",
    ///当前的Index
    index: 1,
    ///是否是当前步骤
    selected: false,
    id:10,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},
  {    ///标题
    title: "宝鸡东站",
    ///当前的Index
    index: 2,
    ///是否是当前步骤
    selected: false,
    id:11,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},

  {    ///标题
    title: "宝鸡东站",
    ///当前的Index
    index: 3,
    ///是否是当前步骤
    selected: false,
    id:12,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},
  {    ///标题
    title: "宝鸡东站",
    ///当前的Index
    index: 4,
    ///是否是当前步骤
    selected: false,
    id:13,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},
  {    ///标题
    title: "延安站",
    ///当前的Index
    index: 5,
    id:14,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},
  {    ///标题
    title: "铜川站",
    ///当前的Index
    index: 6,
    ///是否是当前步骤
    selected: false,
    showLeftLine:true,
    id:15,
    selectedIcon:trainStaionIcon,
    showRightLine:false,
    unSelectedIcon:unTrainStaionIcon,
    ///类型[0大。1中，2小]
    type:2,},
  {    ///标题
    title: "韩城站",
    ///当前的Index
    index: 7,
    ///是否是当前步骤
    selected: false,
    id:16,
    showLeftLine:true,
    selectedIcon:trainStaionIcon,
    unSelectedIcon:unTrainStaionIcon,
    showRightLine:false,
    ///类型[0大。1中，2小]
    type:2,},
]);


// const fetchData = (query: any) => {
//   // 根据路由参数执行你的逻辑，例如获取数据
//   if (query.leftMenuIndex) {
//     const leftMenuIndex = Array.isArray(query.leftMenuIndex) ? query.leftMenuIndex[0] : query.leftMenuIndex;
//     clickHander(leftMenuIndex);
//   } else {
//     console.error('mainTopIndexNavigation 没进来');
//   }
// };

// watch(() => route.query, fetchData, { immediate: true });
onMounted(()=>{
  const leftMenuIndex = Array.isArray(route.query.leftMenuIndex)
      ? route.query.leftMenuIndex[0]
      : route.query.leftMenuIndex;

  leftMenuType.value = Array.isArray(route.query.leftMenuType)
      ? route.query.leftMenuType[0]
      : route.query.leftMenuType;
  addMenu(leftMenuIndex);
  console.log(leftMenuType,':leftMenuType______');


});


///变化了后会重新计算
const title = computed(() => {
  console.log(`leftMenuType.value${leftMenuType.value}`);

  if (leftMenuType.value === '0') {
    return '课件资源';
  }
  console.log(btnDatas,'data所有规章...........btn...data');
  return '规章管理';
});


///获取Icon
const icon = computed(() => {
  if (leftMenuType.value === '0') {
    return iconLearn;
  }
  return iconManager;
});




///鼠标单击
function clickHander(id:number,upRoute:boolean){
  isZeroSelected.value=1;
  btnDatas.value.forEach((e,index)=>{
    e.selected = false;
    e.showRightLine=false;
    if(id===e.id){
      if(index===2){
        isZeroSelected.value=0;
      }else if(index===(btnDatas.value.length-1)){
        isZeroSelected.value=2;
      }else{
        isZeroSelected.value=1;
      }
      e.showRightLine=true;
      e.selected =true;
    }
  },);
  btnDatasChildred.value.forEach((e,index)=>{
    e.selected= false;
    if(id===e.id){
      e.selected =true;
      return;
    }
  })

  if(upRoute){
    updateRoute(id);
  }
}

function addMenu(selectedIndex:boolean){
  if(leftMenuType.value==='0' && (btnDatas.value[0].title!=='所有课件' && btnDatas.value[0].title!=='所有规章')){
    const newItem = {    ///标题
      title: "所有课件",
      ///当前的Index
      index: 0,
      id:0,
      ///是否是当前步骤
      selected: selectedIndex===0,
      showLeftLine:false,
      selectedIcon:allWayIcon,
      showRightLine:false,
      unSelectedIcon:unAllWayIcon,
      ///类型[0大。1中，2小]
      type:0,};
    btnDatas.value.unshift(newItem);
  }

  if(leftMenuType.value==='1' && (btnDatas.value[0].title!=='所有课件' && btnDatas.value[0].title!=='所有规章')){
    const newItem = {    ///标题
      title: "所有规章",
      ///当前的Index
      index: 0,
      id:0,
      ///是否是当前步骤
      selected: selectedIndex===0,
      showLeftLine:false,
      selectedIcon:allWayIcon,
      showRightLine:false,
      unSelectedIcon:unAllWayIcon,
      ///类型[0大。1中，2小]
      type:0,};
    btnDatas.value.unshift(newItem);
  }
  // 解析为整数
  const index = parseInt(selectedIndex, 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHander(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', leftMenuIndex);
  }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      leftMenuIndex: index,
    },
  });
};

const lineClass = computed(() => {
  console.log('我触发了')
  if (isZeroSelected.value===0) {
    return {
      marginTop: '256px',
      height:`${(btnDatas.value.length-2)*92-33}px`
    };
  } else if(isZeroSelected.value===1){
    return {
      marginTop: '278px',
      height:`${(btnDatas.value.length-2)*92-55}px`
    }
  }else{
    return {
      marginTop: '278px',
      height:`${(btnDatas.value.length-2)*92-6}px`
    }
  }
});

</script>

<template>
  <div  class="rootMainStyle">
    <div class="head_class">
      <img :src="icon" width="28px" height="28px">
      <div style="width: 10px"></div>
      {{title}}
    </div>

    <div style="display: flex;flex-direction: row;position: relative">
      <!--线1-->
      <div style="position: relative;width: 1px;height:774px;margin-top: 142px;background-color: rgba(255,255,255,0.6);"/>
      <!--宝鸡站-->
      <div style="z-index:10;display: flex;flex-direction: column">
                <StaionButton @click="clickHander(element.id,true)" v-for="(element,index) in btnDatas" :key="element.title+index" :buttonData="element"></StaionButton>
      </div>
      <div style="position: absolute">
        <div class="lineTwoStyle" :style="lineClass"/>
      </div>
      <div style="display: flex;flex-direction: column;margin-top: 220px">
        <StaionButton  @click="clickHander(element.id,true)"  v-for="(element,index) in btnDatasChildred" :key="element.title+index" :buttonData="element"></StaionButton>
      </div>
    </div>
  </div>
</template>

<style scoped>


.lineTwoStyle{
  width: 1px;
  height:695px;
  margin-left: 210px;
  margin-top: 206px;
  background-color: rgba(255,255,255,0.6);
}
.rootMainStyle{
  background: url('../assets/menu_back_ground.png'),
  linear-gradient( 180deg, #004373 0%, #012B4B 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  padding-bottom: 95px;
  padding-top: 20px;
  padding-left: 15px;
  border-radius: 6px;
}
.head_class{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #FFFFFF;
}
</style>